import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';

const Profile = () => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-100px' });
  
  const personalStatement = "我是一名对技术充满热情的初级前端开发工程师，拥有两年的Web开发经验，专注于使用React和Vue构建用户友好的交互式界面。我热衷于将设计师的创意精准地转化为高性能的网页应用，并不断学习前沿技术以提升自己。我是一个积极主动的问题解决者，期待能加入一个富有挑战和创造力的团队。";
  
  return (
    <motion.section
      id="profile"
      ref={ref}
      initial={{ opacity: 0, x: -50 }}
      animate={isInView ? { opacity: 1, x: 0 } : {}}
      transition={{ duration: 0.8, ease: "easeOut" }}
      className="bg-color-card rounded-xl p-6 shadow-lg backdrop-blur-sm border border-gray-800"
    >
      <div className="flex items-center mb-6">
        <div className="w-10 h-10 rounded-full bg-color-accent flex items-center justify-center mr-4 star-glow">
          <i className="fa-solid fa-user text-white"></i>
        </div>
        <h2 className="text-2xl font-bold text-gray-100">个人简介</h2>
      </div>
      
      <div className="border-t border-gray-700 pt-6">
        <p className="text-gray-300 leading-relaxed">
          {personalStatement}
        </p>
      </div>
    </motion.section>
  );
};

export default Profile;